<template>
  <div>
    <a-card>
      <a-form :form="form">
        <a-row>
          <a-col :md="20" :sm="24">
            <a-col :sm="20">
              <strong style="padding-left:50px;line-height:50px">项目信息</strong>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="项目编号"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-input :disabled="disabled" v-decorator="['xmbh',
                  {
                    rules: [{ required: true, message: '请输入项目编号!' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="项目名称"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-input :disabled="disabled" v-decorator="['xmmc',
                  {
                    rules: [{ required: true, message: '请输入项目名称!' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="项目类别"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-select :disabled="disabled" allowClear v-decorator="['xmlbm',
                  {
                    rules: [{ required: true, message: '请选择项目类别!' }],
                  }]">
                  <a-select-option v-for="i in HWXNYJYDSXMLBM" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="项目开始时间"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-date-picker :disabled="disabled" v-decorator="['kssj',
                  {
                    rules: [{ required: true, message: '请选择项目起止时间!' }],
                  }]" style="width: 100%" format="YYYY-MM-DD"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="项目结束时间"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-date-picker :disabled="disabled" v-decorator="['jssj',
                  {
                    rules: [{ required: true, message: '请选择项目起止时间!' }],
                  }]" style="width: 100%" format="YYYY-MM-DD"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="项目类型"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-select :disabled="disabled" v-decorator="['xmlxm',
                  {
                    rules: [{ required: true, message: '请选择项目类型' }],
                  }]" showSearch :filterOption="filterOption">
                  <a-select-option v-for="i in HWXNYJYDSXMLXM" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="项目经费"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-input :disabled="disabled" v-decorator="['xmjf',
                  {
                    rules: [{ required: true, message: '项目经费' }],
                  }]" addon-after="万元"/>
              </a-form-item>
            </a-col>
            <!-- <a-col :md="24" :sm="24">
              <a-form-item
                label="学生"
                :labelCol="{span: 3,offset: 1}"
                :wrapperCol="{span: 19, offset: 1}"
              >
                <a-select mode="multiple" v-decorator="['studentIds',
                  {
                    rules: [{ required: false, message: '请选择学生' }],
                  }]" showSearch :filterOption="filterOption">
                  <a-select-option v-for="i in selectMenu.xsList" :key="i.xsxxId" :value="i.xsxxId">{{ i.xm }} {{ i.ssyxmc }} </a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
            <a-col :md="24" :sm="24">
              <a-form-item
                label="备注"
                :labelCol="{span: 3,offset: 1}"
                :wrapperCol="{span: 19, offset: 1}"
              >
                <a-textarea :disabled="disabled" v-decorator="['note',
                  {
                    rules: [{ required: false, message: '备注' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :sm="20">
              <strong style="padding-left:50px;line-height:50px">导师信息</strong>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="姓名"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-select :disabled="disabled" v-decorator="['dsId',
                  {
                    rules: [{ required: false, message: '请选择姓名' }],
                  }]" showSearch :filterOption="filterOption" @change="dsChange">
                  <a-select-option v-for="i in selectMenu.gndsList" :key="i.dsId" :value="i.dsId" @click="dsxxChange(i)">{{ i.xm }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="性别"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-input v-model="dsxx.xbmc" :disabled="true"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="所在院系"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-input v-model="dsxx.ssyxmc" :disabled="true"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="专业方向"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-input v-model="dsxx.zymc" :disabled="true"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="邮箱"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-input v-model="dsxx.dzxx" :disabled="true"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="电话"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-input v-model="dsxx.lxdh" :disabled="true"/>
              </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
              <a-form-item
                label="学生"
                :labelCol="{span: 3,offset: 1}"
                :wrapperCol="{span: 19, offset: 1}"
              >
                <a-select :disabled="disabled" mode="multiple" v-decorator="['studentIds',
                  {
                    rules: [{ required: false, message: '请选择学生' }],
                  }]" showSearch :filterOption="filterOption">
                  <a-select-option v-for="i in xsList" :key="i.xsxxId" :value="i.xsxxId">{{ i.xm }} {{ i.ssyxmc }} </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <div class="ant-pro-footer-toolbar">
      <a-button  v-if="this.$route.query.zt != 0" style="float: right;margin-top: 10px;" @click="creatTeacher" :loading="loadingBtn" type="primary">保存</a-button>
      <a-button style="float: right;margin-top: 10px;margin-right: 20px;" @click="$router.back()">返回</a-button>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
const selectArr = ['HWXNYJYDSXMLBM', 'HWXNYJYDSXMLXM']
function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
export default {
  data () {
    return {
      selectMenu: {},
      teacherInfo: {},
      loading: false,
      uploadUrl:`${process.env.SERVICE_URL}upload/img`,
      imageUrl: '',
      loadingBtn: false,
      dsxx:{},
      id:"",
      xsList: [],
      disabled: false

    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  computed: {
    ...mapState({
      HWXNYJYDSXMLXM: state => state.app['HWXNYJYDSXMLXM'], //
      HWXNYJYDSXMLBM: state => state.app['HWXNYJYDSXMLBM'], //
    })
  },
  created () {
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
    this.initSelectMenu()
    this.$nextTick(() => {
      this.$api.overseas.projectInfo(this.$route.params.dsbh).then(res => {
        this.teacherInfo = res.data
        if (res.data.students) {
          res.data.studentIds = res.data.students.map(item=> item.id)
        }
        this.id = res.data.id
        this.$api.overseas.teacherInfo({dsbh:res.data.dsgh}).then(res => {
          console.log(res)
          this.dsxx = res.data
        })

        this.$changeDate(res.data)
        this.form.setFieldsValue({...res.data, dsbh: res.data.gh})
        console.log(this.teacherInfo)
        this.dsChange(this.teacherInfo.dsId)
      })
      console.log(this.$route.query.zt)
      if(this.$route.query.zt == 0){
        this.disabled = true
      }else{
        this.disabled = false

      }
    })
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll(),
        // this.$api.overseas.stuInfoList(),
        this.$api.overseas.getGndsList(),
      ]
      Promise.all(allRequest).then(res => {
        console.log("1111111111111", res)
        this.selectMenu = {
          // xsList: res[1].data.rows,
          gndsList: res[1].data
        }
        this.selectMenu.gndsList.sszymc = this.selectMenu.gndsList.zymc
      })

    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        let path = info.file.response.data[0]
        this.form.setFieldsValue({zpdz: path})
        this.imageUrl = `${process.env.IMG_URL}${path}`
      }
    },
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      if (!isJPG) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJPG && isLt2M
    },
    setData (option, key) {
      this.form.setFieldsValue({[key]: option.data.attrs.name})
    },
    handlePChange(v) {
      this.form.setFieldsValue({byxxdm: ''})
      this.$api.base.schoolInfoQueryAll({xzqhsdm: v}).then(res => {
        this.$set(this.selectMenu, 'schoolList' , res.data)
      })
    },
    dsChange(v,n){
      console.log(v,n)
      // this.dsxx = n.data.attrs.itemData
      if(v){
        this.$api.overseas.stuInfoList({dsId: v, id: this.id}).then(res => {

          this.xsList = res.data
        })
      }else{
        this.xsList = []
      }
    },
    dsxxChange(i){
        this.dsxx = i
        this.form.setFieldsValue({studentIds: []})
        // this.xsList = []
    },
    creatTeacher () {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        try {
          this.loadingBtn = true
          for (const key in values) {
            if (['rdpzny', 'scrbdny', 'scrsdny'].includes(key) && values[key]) {
              values[key] = values[key].format('YYYYMM')
            }
          }
          // studentIds
          this.$DateToString(values)
          console.log(values)
          values.shzt = '01'
          values.id = this.id
          this.$message.loading('保存中', 0)
          this.$api.overseas.addProject(values).then(res => {
            this.$message.success(res.msg, 4)
          }).finally(() => {
            setTimeout(() => {
              this.$message.destroy()
              this.$router.back()
            }, 4000);
            this.loadingBtn = false
            // this.form.resetFields()
          })
        } catch (error) {
          console.log(error)
        }
      })
    }
  }
}
</script>
